<template>
  <div>
    <el-page-header @back="()=>{this.$router.go(-1)}" content="日历">
    </el-page-header>
    <div class="plan-finish-header">
      <div class="plan-finish-bg"></div>
    </div>
    <div class="plan-finish-calendar mtop1">
      <div class="calendar">
        <!-- 年份 月份 -->
        <ul class="month bottom-line">
          <!--点击会触发pickpre函数，重新刷新当前日期 -->
          <li class="arrow" @click="pickPre(currentYear,currentMonth)">
            <i class="mintuifont mintui-arrowright arrowleft"></i>
          </li>
          <li class="year-month">
            <span>{{currentYear+'年'+currentMonth+'月'}}</span>
          </li>
          <li class="arrow" @click="pickNext(currentYear,currentMonth)">
            <i class="mintuifont mintui-arrowright"></i>
          </li>
          <div @click="go('./work/add')"><img src="../assets/icon/3.png" width="60rem"></div>
          <!-- <span onclick="document.location.href='add.html'" v-show="localStorage.getItem('xmtid')=='xm1'">➕</span> -->
        </ul>
        <ul class="weekdays">
          <li>日</li>
          <li>一</li>
          <li>二</li>
          <li>三</li>
          <li>四</li>
          <li>五</li>
          <li>六</li>
        </ul>
        <ul class="days bottom-line">
          <li v-for="day in days" @click="dayCheck(day)">
            <span :day="day.day" :class="['day-li',day.isChecked?'day-checked':'']">
              <span
                :class="['day-span',day.isSign?'day-sign':'',day.day.getMonth()+1 !== currentMonth?'other':'',day.isSigned?'day-signed':'']"
                v-text="day.day.getDate()"></span>
            </span>
          </li>
        </ul>
      </div>
      <div v-for="day in dinfo" class="plan-calendar-box">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>{{day.info.name}}</span>
            <el-button style="float: right; padding: 3px 0" type="text">删除</el-button>
          </div>
          <div>类型：{{day.info.type}}</div>
          <span v-if="day.info.needUrl">
            <el-button type="text" @click="go(day.info.url)">进入详情</el-button>
          </span>
        </el-card>
      </div>



    </div>
  </div>
  </div>
</template>

<script>
  import rlApi from "../api/rl.js"
  export default {
    data() {
      return {
        // 日历
        currentDay: 1, // 当前天
        currentMonth: 1, // 当前月
        currentYear: 1970,
        currentWeek: 0, // 一号所在的星期
        days: [], // 当月所有天数
        content: {},
        sign_days: [], // 签到日期
        is_sign: false,
        dinfo: [],
        myget: this.$myajax.myget,
      }
    },
    created() {
      this.getSign();
      document.querySelector("body").style.overflowX = "hidden";
    },
    mounted() {
      this.px2rem(document, window);
    },
    methods: {
      px2rem(doc, win) {
        console.log(4)
        let docEl = doc.documentElement,
          resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
        if (!doc.addEventListener) return;
        // 窗口大小发生变化，初始化
        win.addEventListener(resizeEvt, this.recalc(docEl), false);
        doc.addEventListener('DOMContentLoaded', this.recalc(docEl), false);
      },
      recalc(docEl) {
        let clientWidth = docEl.clientWidth;
        if (!clientWidth) return;
        docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
        /*
         * 100 -> html,body {  font-size:100px; }
         * 750 -> 此处以 iPhone6 两倍设计稿 宽度750px 布局页面
         * 根据具体情况改变这两个数值
         */
      },
      getSign: function() {
        this.initData(null);
      },
      initData: function(cur) {
        let date;
        if (cur) { // 切换上一月、下一月
          date = new Date(cur);
        } else {
          let now = new Date(); // 此处取本机时间，应改为服务器时间
          let d = new Date(this.formatDate(now.getFullYear(), now.getMonth() + 1, 1));
          d.setDate(35); // 设置天数为35天（32~59都可以，既设置到下一个月的某一天）
          date = new Date(this.formatDate(d.getFullYear(), d.getMonth(), 1));
        }
        this.currentDay = new Date().getDate(); // 今日日期 几号
        this.currentYear = date.getFullYear(); // 当前年份
        this.currentMonth = date.getMonth() + 1; // 当前月份
        this.currentWeek = date.getDay(); // 当前月1号是星期几？ 0表示星期天

        // 当前月最后一天是星期几？ 0表示星期天
        this.nextWeek = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDay();
        let str = this.formatDate(this.currentYear, this.currentMonth, 1); // 2020/01/01
        let nextStr = new Date(date.getFullYear(), date.getMonth() + 1, 0)
          .toLocaleDateString(); // 2020/01/01
        // console.log(nextStr)
        this.days = []; // 初始化日期
        // 设置上一个月 需显示 的最后几天  铺满一周
        for (let i = this.currentWeek; i > 0; i--) {
          let d = new Date(str);
          d.setDate(d.getDate() - i);
          let dayobject = {
            day: d,
            dayinfo: undefined,
            isSign: this.isVerDate(d),
            isSigned: this.isSigned(d)
          }; // 用一个对象包装Date对象  以便为以后预定功能添加属性
          this.days.push(dayobject); // 将日期放入data 中的days数组 供页面渲染使用
        }
        // 显示当前月的天数  第二个循环为 j<= 36- this.currentWeek，
        // 因为1号是星期六的时候当前月需显示6行，如2020年8月
        this.num = 0; //第几个月 每遇到1号加1
        for (let j = 0; j <= 36 - this.currentWeek; j++) {
          let d = new Date(str);
          d.setDate(d.getDate() + j);
          let dddd = d.getDate();
          let dayobject = {
            day: d,
            dayinfo: [],
            isSign: false, //this.isVerDate(d),
            isSigned: false, //this.isSigned(d)
          };
          if (dddd == 1) {
            this.num++
          }
          if (this.num == 2) {
            break
          }
          this.days.push(dayobject);
        }
        // console.log('当前月1号是星期' + this.currentWeek)
        // console.log('当前月最后一天是星期' + this.nextWeek)
        // 设置下一个月 需显示 的最前几天铺满一周
        for (let k = 1; k <= 6 - this.nextWeek; k++) {
          let d = new Date(nextStr);
          d.setDate(d.getDate() + k);
          let dayobject = {
            day: d,
            dayinfo: this.isVerDate(d),
            isSign: this.isVerDate(d),
            isSigned: this.isSigned(d)
          }; // 用一个对象包装Date对象  以便为以后预定功能添加属性
          this.days.push(dayobject); // 将日期放入data 中的days数组 供页面渲染使用
        }
        let sign_days = [];
        // console.log("==="+this.currentMonth)

        rlApi.getRl(date.getMonth() + 1).then((res) => {
          for (let i of res.data) {
            let day_now = this.days[i.day + this.currentWeek - 1] //获取不算上个月的时间的应该的days序列
            day_now.dayinfo.push({
              info: i,
            })
            day_now.isSigned = true
          }
        })
      },
      /**
       * 判断该日期是否有任务
       * @param d
       * @returns {boolean}
       */
      isVerDate: function(d) {
        let signdays = [];
        for (let i in this.sign_days) {
          signdays.push(this.sign_days[i].day);
        }
        return signdays.includes(d.toLocaleDateString());
      },
      /**
       * 判断该日期是否有任务并且已完成
       * @param d
       * @returns {boolean}
       */
      isSigned: function(d) {
        let signdays = [];
        for (let i in this.sign_days) {
          if (this.sign_days[i].is_sign) {
            signdays.push(this.sign_days[i].day);
          }
        }
        return signdays.includes(d.toLocaleDateString());
      },
      /**
       * 上一月
       * @param year
       * @param month
       */
      pickPre: function(year, month) {
        let d = new Date(this.formatDate(year, month, 1));
        d.setDate(0);
        this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
      },
      /**
       * 下一月
       * @param year
       * @param month
       */
      pickNext: function(year, month) {
        let d = new Date(this.formatDate(year, month, 1));
        d.setDate(35);
        this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
      },
      // 返回 类似 2020/01/01 格式的字符串
      formatDate: function(year, month, day) {
        month < 10 && (month = '0' + month);
        day < 10 && (day = '0' + day);
        let data = year + '/' + month + '/' + day;

        return data;
      },
      /**
       * 点击日期查询
       * @param index
       */
      dayCheck: function(day) {
        this.dinfo = []
        this.dinfo = day.dayinfo
        console.log(this.dinfo)
      },
      go(path) {
        this.$router.push(path)
      }
    }
  }
</script>

<style scoped>
  @import '../assets/css/calendar.css';
  @import '../assets/css/common.css';

  .startWork {
    padding: 10px 5px;
    margin-bottom: 10px;
  }

  .box-card {
    margin-top: 15px;
  }
</style>
